<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trae IDE 界面复刻</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Roboto', sans-serif;
        }
        /* 修复菜单图标和文本对齐问题 */
        .menu-label {
            align-items: center;
            display: flex;
        }
        body {
            background-color: #1e1e1e;
            color: #d4d4d4;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* 顶部工具栏 */
        .toolbar {
            background-color: #2d2d2d;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #383838;
            height: 48px;
        }
        .toolbar-btn {
            background: none;
            border: none;
            color: #d4d4d4;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .toolbar-btn:hover {
            background-color: #3a3a3a;
        }
        .toolbar-btn.active {
            background-color: #007acc;
            color: white;
        }
        .toolbar-separator {
            width: 1px;
            height: 24px;
            background-color: #444;
            margin: 0 8px;
        }
        /* 菜单样式 */
        .menu-container {
            display: flex;
            height: 100%;
        }
        .menu-item {
            position: relative;
            height: 100%;
        }
        .menu-label {
            display: flex;
            align-items: center;
            padding: 0 16px;
            height: 100%;
            cursor: pointer;
            gap: 6px;
        }
        .menu-label:hover {
            background-color: #3a3a3a;
        }
        .menu-label .shortcut {
            opacity: 0.7;
            margin-left: 8px;
            font-size: 12px;
        }
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            background-color: #252526;
            border: 1px solid #383838;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            display: none;
            z-index: 100;
        }
        .menu-item:hover > .submenu {
            display: block;
        }
        .submenu-item {
            padding: 6px 16px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .submenu-item:hover {
            background-color: #007acc;
            color: white;
        }
        .submenu-item.separator {
            height: 1px;
            padding: 0;
            margin: 6px 0;
            background-color: #383838;
            cursor: default;
        }
        .submenu-item.has-submenu {
            position: relative;
        }
        .submenu-item.has-submenu::after {
            content: '►';
            font-size: 10px;
            margin-left: 8px;
        }
        .submenu-item .submenu {
            top: 0;
            left: 100%;
            border-radius: 4px;
        }
        /* 主内容区 */
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        /* 左侧 AI 对话面板 */
        .ai-panel {
            width: 320px;
            background-color: #252526;
            border-right: 1px solid #383838;
            display: flex;
            flex-direction: column;
        }
        .panel-header {
            padding: 12px 16px;
            border-bottom: 1px solid #383838;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-messages {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .message {
            max-width: 100%;
        }
        .message.ai {
            align-self: flex-start;
        }
        .message.user {
            align-self: flex-end;
        }
        .message-content {
            padding: 10px 14px;
            border-radius: 6px;
            max-width: 85%;
        }
        .ai .message-content {
            background-color: #333333;
        }
        .user .message-content {
            background-color: #007acc;
            color: white;
        }
        .chat-input {
            padding: 12px 16px;
            border-top: 1px solid #383838;
            display: flex;
            gap: 8px;
        }
        .chat-input input {
            flex: 1;
            background-color: #333333;
            border: 1px solid #444;
            border-radius: 4px;
            padding: 8px 12px;
            color: white;
            outline: none;
        }
        .chat-input button {
            background-color: #007acc;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            cursor: pointer;
        }
        /* 右侧代码编辑器区域 */
        .editor-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .editor-tabs {
            display: flex;
            background-color: #252526;
            border-bottom: 1px solid #383838;
            padding-left: 8px;
        }
        .editor-tab {
            padding: 8px 16px;
            font-size: 14px;
            border-right: 1px solid #383838;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .editor-tab.active {
            background-color: #1e1e1e;
            border-top: 2px solid #007acc;
            margin-top: -1px;
        }
        .editor-content {
            flex: 1;
            padding: 16px;
            overflow: auto;
            background-color: #1e1e1e;
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }
        .code-line {
            display: flex;
        }
        .line-number {
            color: #666;
            width: 40px;
            text-align: right;
            padding-right: 16px;
            user-select: none;
        }
        .code-content {
            flex: 1;
        }
        .keyword {
            color: #569cd6;
        }
        .string {
            color: #ce9178;
        }
        .comment {
            color: #6a9955;
        }
        .function {
            color: #dcdcaa;
        }
        .variable {
            color: #9cdcfe;
        }
    </style>
</head>
<body>
    <!-- 顶部工具栏 -->
    <div class="toolbar">
        <div id="menu-container" class="menu-container"></div>
        <div class="toolbar-separator"></div>
        <button class="toolbar-btn active">
            <span>编辑器</span>
        </button>
        <button class="toolbar-btn">
            <span>终端</span>
        </button>
        <button class="toolbar-btn">
            <span>浏览器</span>
        </button>
        <button class="toolbar-btn">
            <span>文档</span>
        </button>
        <div class="toolbar-separator"></div>
        <button class="toolbar-btn">
            <span>运行</span>
        </button>
        <button class="toolbar-btn">
            <span>调试</span>
        </button>
    </div>
    <script>
        // 生成菜单的递归函数
        function createMenu(menuItems) {
            const fragment = document.createDocumentFragment();

            menuItems.forEach(item => {
                if (item.separator) {
                    const separator = document.createElement('div');
                    separator.className = 'submenu-item separator';
                    fragment.appendChild(separator);
                    return;
                }

                const menuItem = document.createElement('div');
                menuItem.className = 'menu-item';

                const label = document.createElement('div');
                label.className = 'menu-label';
                label.innerHTML = `${item.icon || ''} ${item.label}${item.shortcut ? '<span class="shortcut">' + item.shortcut + '</span>' : ''}`;
                menuItem.appendChild(label);

                if (item.submenu) {
                    const submenu = document.createElement('div');
                    submenu.className = 'submenu';
                    submenu.appendChild(createMenu(item.submenu));
                    menuItem.appendChild(submenu);
                } else if (item.action) {
                    label.addEventListener('click', () => {
                        // 这里可以添加菜单点击事件处理
                        console.log(`Menu action: ${item.action}`, item.params || {});
                        // 实际应用中可以根据action执行相应的函数
                        if (window.menuActions && typeof window.menuActions[item.action] === 'function') {
                            window.menuActions[item.action](item.params || {});
                        }
                    });
                }

                fragment.appendChild(menuItem);
            });

            return fragment;
        }

        // 加载菜单配置并生成菜单
        fetch('menu-config.json')
            .then(response => response.json())
            .then(config => {
                const menuContainer = document.getElementById('menu-container');
                menuContainer.appendChild(createMenu(config.menuItems));
            })
            .catch(error => {
                console.error('Failed to load menu configuration:', error);
                const errorElement = document.createElement('div');
                errorElement.className = 'menu-error';
                errorElement.textContent = '菜单加载失败';
                document.getElementById('menu-container').appendChild(errorElement);
            });

        // 示例菜单动作处理函数（实际应用中可以扩展）
        window.menuActions = {
            setTheme: (params) => {
                console.log('Setting theme to:', params.theme);
                // 这里可以添加主题切换逻辑
            },
            increaseFontSize: () => {
                console.log('Increasing font size');
                // 这里可以添加字体大小调整逻辑
            },
            // 可以添加更多动作处理函数
        };
    </script>

    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 左侧 AI 对话面板 -->
        <div class="ai-panel">
            <div class="panel-header">
                <span>SOLO Builder</span>
                <button class="toolbar-btn" style="padding: 4px;">
                    <span>+</span>
                </button>
            </div>
            <div class="chat-messages">
                <div class="message ai">
                    <div class="message-content">
                        你好！我是 SOLO，一个上下文工程师。我可以帮助你构建完整的项目。请告诉我你的需求。
                    </div>
                </div>
                <div class="message user">
                    <div class="message-content">
                        帮我创建一个仿照 Trae IDE 的界面
                    </div>
                </div>
                <div class="message ai">
                    <div class="message-content">
                        正在为你创建 Trae IDE 界面复刻...
                    </div>
                </div>
            </div>
            <div class="chat-input">
                <input type="text" placeholder="输入你的需求...">
                <button>发送</button>
            </div>
        </div>

        <!-- 右侧代码编辑器区域 -->
        <div class="editor-container">
            <div class="editor-tabs">
                <div class="editor-tab active">
                    <span>index.html</span>
                </div>
                <div class="editor-tab">
                    <span>style.css</span>
                </div>
                <div class="editor-tab">
                    <span>script.js</span>
                </div>
            </div>
            <div class="editor-content">
                <div class="code-line">
                    <div class="line-number">1</div>
                    <div class="code-content"><span class="keyword">&lt;!DOCTYPE</span> <span class="variable">html</span>&gt;</div>
                </div>
                <div class="code-line">
                    <div class="line-number">2</div>
                    <div class="code-content"><span class="keyword">&lt;html</span> <span class="variable">lang</span>=<span class="string">"zh-CN"</span>&gt;</div>
                </div>
                <div class="code-line">
                    <div class="line-number">3</div>
                    <div class="code-content"><span class="keyword">&lt;head&gt;</span></div>
                </div>
                <div class="code-line">
                    <div class="line-number">4</div>
                    <div class="code-content">    <span class="keyword">&lt;meta</span> <span class="variable">charset</span>=<span class="string">"UTF-8"</span>&gt;</div>
                </div>
                <div class="code-line">
                    <div class="line-number">5</div>
                    <div class="code-content">    <span class="keyword">&lt;meta</span> <span class="variable">name</span>=<span class="string">"viewport"</span> <span class="variable">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</div>
                </div>
                <div class="code-line">
                    <div class="line-number">6</div>
                    <div class="code-content">    <span class="keyword">&lt;title&gt;</span>Trae IDE 界面复刻<span class="keyword">&lt;/title&gt;</span></div>
                </div>
                <div class="code-line">
                    <div class="line-number">7</div>
                    <div class="code-content">    <span class="keyword">&lt;style&gt;</span></div>
                </div>
                <div class="code-line">
                    <div class="line-number">8</div>
                    <div class="code-content">        <span class="comment">/* CSS 样式内容 */</span></div>
                </div>
                <div class="code-line">
                    <div class="line-number">9</div>
                    <div class="code-content">    <span class="keyword">&lt;/style&gt;</span></div>
                </div>
                <div class="code-line">
                    <div class="line-number">10</div>
                    <div class="code-content"><span class="keyword">&lt;/head&gt;</span></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>